<template>
  <div>
    <!-- 复用组件 就不改了（其他项目也能用） -->
    <my-header title="购物车案例"></my-header>
    <better-scroll class="better">
      <my-goods v-for="item in list" :key="item.id" :id="item.id" />
    </better-scroll>
    <my-footer/>
  </div>
</template>

<script>
// 优化移动端滚动
import BetterScroll from "components/bsScroll/BsScroll";

// 头部
// 展示商品
// 底部结算
import MyHeader from "components/MyHeader";
import MyGoods from "components/MyGoods";
import MyFooter from "components/MyFooter";

// vuex
import { mapState } from "vuex";

// 网络请求
import { goodsList } from "network/goods";

export default {
  data() {
    return {
      // list: [],
    };
  },
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
    BetterScroll,
  },
  computed: {
    ...mapState(["list"]),
  },
  async created() {
    let res = await goodsList()
    this.$store.dispatch("isList", res.data.list);

    // let res = await goodsList()
    // this.list = res.data.list
    // console.log(res);
  },
  // methods: {
  //   selectAll(isSelect) {
  //     this.list.filter((item) => (item.goods_state = isSelect));
  //   },
  // },
};
</script>

<style scoped>
.better {
  margin-top: 45px;
  height: calc(100vh - 50px - 45px);
  overflow: hidden;
}
</style>